<!--
 * @Description: 个人中心
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2020-12-05 16:45:33
 * @LastEditors: Seven
 * @LastEditTime: 2020-12-21 14:06:26
-->
<template>
    <div class="my-wrap">
        <div class="containers">
            <el-row :gutter="20">
                <el-col :xs="24" :sm="15" :md="5">
                    <div class="left-wrap">
                        <div class="avatar-wrap">
                            <el-avatar class="img-box" :size="90" :src="user.avatarUrl ? IMG_URL + user.avatarUrl : '/images/avatar.png'"></el-avatar>
                            <div class="text-info">{{user.nickName}}</div>
                        </div>

                        <div class="nav-list">
                            <div class="item">
                                <nuxt-link class="link" to="/my/myOrder">
                                    <i class="iconfont icondingdan"></i>
                                    <span>我的订单</span>
                                </nuxt-link>
                            </div>
                            <div class="item">
                                <nuxt-link class="link" to="/my/myCourse">
                                    <i class="iconfont iconkecheng"></i>
                                    <span>我的课程</span>
                                </nuxt-link>
                            </div>
                            <div class="item">
                                <nuxt-link class="link" to="/my/myQuestion">
                                    <i class="iconfont iconzhihuitiku"></i>
                                    <span>我的题库</span>
                                </nuxt-link>
                            </div>
                            <div class="item">
                                <nuxt-link class="link" to="/my/myCoupon">
                                    <i class="iconfont iconyouhuiquan"></i>
                                    <span>我的优惠券</span>
                                </nuxt-link>
                            </div>
                        </div>

                        <div class="follow">
                            <div class="s">关注我们</div>
                            <div class="img-box">
                                <img src="/images/example/erweima.png" alt="" />
                            </div>
                            <div class="n">
                                微信扫码关注xxx小程序 了解更多一线资讯
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="9" :md="19">
                    <nuxt-child/>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
export default {
    computed:{
        // 用户信息
        user(){
            return this.$store.state.user
        }
    },
};
</script>
<style lang="scss" scoped>
.my-wrap {
    padding: 20px 0;
}
.left-wrap {
    background-color: #fff;
    height: 800px;
    .avatar-wrap {
        text-align: center;
        padding: 26px 0;
        .text-info {
            margin-top: 34px;
            font-size: 16px;
            color: #666;
        }
    }
    .nav-list {
        padding: 0 30px;
        border-top: 1px solid #eeeeee;
        .item {
            border-bottom: 1px solid #eeeeee;
            .link {
                display: block;
                height: 64px;
                line-height: 64px;
                text-align: left;
                padding-left: 34px;
                i {
                    font-size: 24px;
                    vertical-align: middle;
                }
                span {
                    font-size: 14px;
                    vertical-align: middle;
                }
                &.nuxt-link-exact-active{
                    color: $--color-primary;
                }
            }
        }
    }
    .follow {
        text-align: center;
        padding: 30px 0;
        background: url('/images/bg-s.png') no-repeat;
        background-position:0 bottom;
        margin-top: 68px;
        .s {
            font-size: 18px;
            color: #333;
        }
        .img-box {
            width: 130px;
            margin: 16px auto;
            padding: 6px;
            background: #fff;
            box-shadow: 0px 2px 8px rgba(0, 34, 255, 0.1);
        }
        .n {
            width: 130px;
            margin: 0 auto;
            color: #666;
            font-size: 12px;
            line-height: 1.5;
        }
    }
}
</style>